<template>
<!-- 搜索弹出层--第1个界面 -->
  <div class="history-hot">
      <div class="his-hot" v-show="isShowHistory">
        <div class="hd">
          <h4>历史记录</h4>  
          <van-icon name="delete-o" @click="delClick"/>
        </div>
        <div class="bd">

          <van-tag plain type="primary" text-color="#666" v-for="(item,index) in historyKeywordList" :key="index" @click="tagClick(item)">{{item}}</van-tag>
        </div>
      </div>
      <div class="his-hot">
        <div class="hd">
          <h4>热门搜索</h4>  
        </div>
        <div class="bd">

          <van-tag plain color="#666" :type="item.is_hot?'danger':'primary'" v-for="(item,index) in hotKeywordList" :key="index"  @click="tagClick(item.keyword)">{{item.keyword}}</van-tag>
        </div>
      </div>
  </div>
</template>

<script>
import {ClearHistory} from "@/request/api"
export default {
  props:["historyKeywordList", "hotKeywordList"],
  data () {
    return {
      isShowHistory:true
 
    }
  },
  methods:{
    tagClick(value){
      // console.log(value);
      this.$emit("tagClick", value)
    },
    delClick(){
      ClearHistory().then(res=>{
        // console.log(res);
        // this.$toast('删除成功');
        this.$toast.success("删除成功");
        setTimeout(()=>{
          this.isShowHistory = false
        },500)
        
      })
    }
  }
  
}
</script>
 
<style lang = "less" scoped>
  .his-hot{
    background-color: #fff;
    padding: .1rem;
    margin-bottom: .2rem;
    .hd{
      display: flex;
      justify-content: space-between;
      font-size:.18rem;
    }
    .van-tag{
      margin-right: .1rem;
      margin-top: .1rem;
      margin-bottom: .05rem;
    }
  }

  .van-tag--danger.van-tag--plain {
    color: #ee0a24!important;
    border-color: #ee0a24!important;
  }
</style>